<script setup>
import * as echarts from 'echarts'
import { onMounted } from 'vue'
import { setupChartAnimation } from '@/utils/animation'
onMounted(() => {
  const myChart = echarts.init(document.querySelector('.safetyEcharts'))

  const option = {
    title: {
      subtext: '1800个',
      text: '处理事务',
      x: 'center',
      y: 'center',
      textStyle: {
        color: '#fff',
        fontSize: 20
      },
      subtextStyle: {
        color: '#fff',
        fontSize: 18
      }
    },
    series: [{
      type: 'pie',
      center: ['50%', '50%'],
      radius: ['40%', '54%'],
      color: ['#1cdb94', '#2b9efb', '#fcba3a'],
      label: {
        formatter:
          `
{b|{b}:} 

{per|{d}%} 
`,
        rich: {
          b: {
            color: '#fff',
            fontSize: 16
          },
          per: {
            color: '#FDF44E',
            fontSize: 14
          }
        }
      },
      data: [
        { name: '未完成数', value: 521 },
        { name: '进行中', value: 321 },
        { name: '完成数', value: 731 }
      ]
    }]
  }

  myChart.setOption(option) // 设置配置项
  // 监听页面是否改变
  window.addEventListener('resize', () => {
    myChart.resize()
  })

  // 图表动画函数
  setupChartAnimation(myChart)
})
</script>

<template>
  <div></div>
</template>

<style scoped></style>